//
// Overview page components
// --------------------------------------------------

.components {
  border-left: 3px dotted #ccc;
  margin-bottom: 30px;
  &:last-child {
    margin-bottom: 10px; // reduce margin since the .container-fluid parent already has bottom margin
  }
  .connector {
    display: none;
  }
  &.components-group {
    border-left-style: solid;
    .connector {
      display: inline-block;
      position: absolute;
      top: 48%;
      left: -5px;
      i {
        color: #ccc;
        .rotate(137deg);
        font-size: 9px;
        position: absolute;
      }
      &:before {
        content: '\f111';
        font: normal normal normal 6px/1 FontAwesome;
        display: inline-block;
        color: #fff;
        position: absolute;
        left: 2px;
        top:1px;
      }
    }
    @media (min-width: @screen-sm-min) {
      .osc-object-active {
        .connector {
          i {
            color: @osc-object-active-color;
          }
        }
      }
    }
  }
  .components-panel {
    background-color: #fff;
    border: 1px solid @border-color-light-grey;
    position: relative;
    .osc-object-highlight();
    h2 {
      // Avoid clipping descenders in routes on overview.
      line-height: 1.3;
    }
    .component-label {
      color: @gray-light;
      font-size: @component-label;
      line-height: @line-height-base;
      overflow: hidden;
      text-transform: uppercase;
      + span {
        margin-left: 5px;
      }
      .component-label-details {
        text-transform: none;
      }
    }
    .component-block {
      .flex-display(@display: flex);
      .flex-direction(@direction: column);
      .flex-wrap(@wrap: wrap);
      @media (min-width: @screen-md-min) {
        // switch to horizontal layout when >=992
        .flex-direction(@direction: row);
      }
      &.component-meta {
        margin: 4px 0 6px;
      }
      &.pod-container {
        .flex-direction(@direction: row);
      }
      .component {
        // so that Safari for iOS properly truncates
        width: 100%;
        @media (min-width: @screen-md-min) {
          // assign flex properties when >=992 for proper layout so that .component no longer stack; % on flex-basis value necessary for IE
          .flex(@columns: 2 0 0%);
          // so that long strings with nowrap truncate
          min-width: 0;
        }
        &.meta-data {
          color: @gray-light;
          font-size: @component-label;
          line-height: @line-height-base;
          @media (min-width: @screen-md-min) {
            // assign flex properties when >=992 for proper layout so that .component no longer stack; % on flex-basis value necessary for IE
            .flex(@columns: 1 0 0%);
            text-align: right;
            .more-ports,
            .port-mappings {
              white-space: nowrap;
            }
          }
        }
        @media (max-width: @screen-sm-max) {
          .ports {
            margin-right: 5px;
          }
        }
        .add-route-link {
          text-transform: none;
          @media (max-width: @screen-sm-max) {
            display: inline-block;
          }
        }
        h2,h3 {
          margin: 0 0 5px;
          .truncate();
        }
      }
    }
    &.service {
      border-left-width: 0;
      margin-bottom: 6px;
      padding: 6px 15px 5px;
      .osc-object-highlight();
      &.none {
        background-color: transparent;
      }
    }
    &.deployment-block {
      margin: 0 0 6px 6px;
      padding: 5px 15px;
      &.none {
        background-color: transparent;
        &:after {
          background-color: #ccc;
          top: 50%;
          content: "";
          display: block;
          height: 1px;
          left: -10px;
          position: absolute;
          width: 9px;
        }
      }
    }
  }
}

.pod-block {
  margin-bottom: 10px;
}

.pod-template-block {
  + .pod-template-block {
    margin-top: 15px;
  }
  .component-label {
    font-size: @component-label;
    padding: 0 10px 4px 0;
    text-transform: uppercase;
  }
  .pod-template {
    // so that .word-break() on children works
    [flex] {
      min-width: 0;
    }
    [row] {
      border-left: 3px solid @gray-lighter;
      padding: 2px 0 0 2px;
    }
    .fa,
    .pficon,
    span[data-icon] {
      color: #888;
    }
    .pod-template-build {
      .word-break();
    }
    .pod-template-key {
      font-weight: bold;
      .components &, .overview & {
        font-weight: 600;
      }
    }
  }
}

code.probe-command {
  // Use inline-block style to prevent trailing whitespace from being
  // highlighted with a background color.  The extra whitespace is difficult to
  // avoid due to use of `ng-repeat` and `truncate-long-text`.
  display: inline-block;
  line-height: 1.3;
  margin-right: 2px;
}

.hash {
  font-family: @font-family-monospace;
  font-size: (@font-size-base - 1);
}

// so that .word-break() on children works
.pod-template-column {
  min-width: 0;
}

.pod-template-container {
  margin: 0 0 20px;
  .components & {
    margin-bottom: 0;
  }
}

.pod-container-terminal {
  margin-top: 15px;
  margin-bottom: 15px;
  kubernetes-container-terminal .terminal-wrapper {
    max-width: 100%;
    overflow-x: auto;
  }
}
.builds-no-service {
  .builds-block {
    .builds {
      .build {
        &:first-child {
          // margin for spacing
          margin-top: 10px;
          &:before {
            // Top border above builds with no service
            content: '';
            display: block;
            height: 1px;
            width: 100%;
            top: -10px;
            left: 0;
            background-color: @border-color-light-grey;
            position: absolute;
          }
        }
      }
    }
  }
}
.builds-block {
  margin-left: 5px;
  .builds {
    margin: 0;
    overflow: hidden;
    .build {
      /* Put a transparent border in place so osc-object-highlight shows selection */
      border: 1px solid transparent;
      .osc-object-highlight();
      border-radius: @border-radius-md;
      padding: 5px;
      position: relative;
      margin: 10px 0 0;
      text-align: left;
      &:first-child {
        margin-top: 0;
      }
      + .build:after {
        background-color: @connector-color;
        top: -6px;
        content: "";
        display: block;
        height: 1px;
        left: 0;
        right: 0;
        position: absolute;
      }
    }
  }
}

.clickable {
  cursor: pointer;
}

.pod-donut {
  // Give an empty pod donut chart a light gray outline.
  path.c3-arc-Empty {
    stroke: #d1d1d1;
    // Override the style set in JavaScript since you can't click or hover
    // on the empty chart.
    cursor: inherit !important;
  }
}

.deployment-donut {
  justify-content: center;
  min-width: 200px;
  .scaling-controls {
    justify-content: center;
    font-size: 24px;
    a {
      color: #bbbbbb;
      &:hover, &:active {
        color: #72767b;
        text-decoration: none;
      }
      &.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        &:hover {
          color: #bbbbbb;
        }
      }
    }
  }
  .scaling-details {
    .small;
    .text-muted;
    .text-center;
    align-items: center;
    // Show text closer to the pod donut. (It has no bottom margin, but the donut chart does not
    // fill the entire SVG height.)
    margin-top: -5px;
    margin-bottom: 7px;
    .hpa-warning {
      cursor: help;
      margin-left: 1px;
      // middle, baseline, etc. are not quite right. Use a length value to align the icon exactly
      // where we want.
      vertical-align: -1px;
    }
  }
}

.browse-deployment-donut .deployment-donut {
  .align-items(@align: center);
  @media (min-width: @screen-sm-min) {
    .align-items(@align: flex-end);
  }
}

/*
 * These pod-container styles are not currently used since we've switched to
 * the donut chart. Leaving them commented out for now in case we want to show
 * individual pods in another place in the UI.
 */

//.pod-container {
//  .flex-display(@display: flex);
//  .flex-direction(@direction: row);
//  .flex-wrap(@wrap: wrap);
//  .justify-content(@justify: flex-start);
//  &.pod-container-lg {
//    .pod {
//      width: 70px;
//      height: 70px;
//    }
//  }
//  .pod {
//    .osc-object-highlight();
//    max-width: 450px;
//    min-width: 120px;
//    background-size: 20px 20px;
//    border-radius: @border-radius-md;
//    border: 1px solid transparent;
//    padding: 10px;
//    position: relative;
//    margin: 0 10px 10px 0;
//    text-align: center;
//    -webkit-font-smoothing: antialiased;
//
//    &:last-child {
//      // no right margin on the last one so collapse links align properly
//      margin-right: 0;
//    }
//
//    .pod-status-label {
//      &:before, &:after {
//        font-family: 'PatternFlyIcons-webfont';
//        font-weight: normal;
//      }
//    }
//
//    &.pod-pending {
//      background-color: #ececec;
//      .striped(@color: rgba(255,255,255,.45); @angle: 45deg);
//    }
//    &.pod-failed {
//      background-image: none;
//      .pod-status-label {
//        position: relative;
//        margin-right: -15px;
//        &:after, &:before {
//          position: absolute;
//        }
//        &:after {
//          color: #fff;
//        }
//      }
//    }
//    &.pod-running, &.pod-succeeded {
//      background-color: @pod-running-bg;
//      background-image: none;
//    }
//    &.pod-failed {
//      background-color: @pod-failed-bg;
//      border: @pod-failed-border;
//      .pod-status-label {
//        &:before {
//          content: @pficon-var-error-circle-o;
//          color: @brand-danger;
//          left: -16px;
//          top: 0;
//        }
//      }
//    }
//    &.pod-warning, &.pod-unknown {
//      background-color: @pod-warning-bg;
//    }
//    .pod-text {
//      font-family: @font-family-base;
//      font-size: 11px;
//    }
//  }
//}

.deployment-well {
  &:not(.active) {
    background-color: white;
  }
  &:not(.detailed) {
    padding-top: 12px;
    padding-bottom: 12px;
    .deployment-summary {
      h3 {
        margin-bottom: 5px;
        text-transform: lowercase;
      }
      .deployment-summary-status {
        font-size: 90%;
        margin-left: 7px;
      }
      .deployment-summary-toggler {
        float: right !important;
        font-size: 80%;
      }
    }
    .deployment-details {
      display: none;
    }
  }
  &.detailed {
    .deployment-summary-status, .deployment-summary-toggler {
      display: none;
    }
  }
}

.popover {
  min-width: 300px;
  font-size: 13px;
  line-height: 1.66667;
}

.build-well, .pod-well, .deployment-well {
  overflow: hidden;
  margin-bottom: 10px;
  .build-detail, .pod-detail, .deployment-detail {
    margin-bottom: 3px;
    .build-detail-label, .pod-detail-label, .deployment-detail-label {
      margin-right: 10px;
    }
  }
  .build-status-button {
    margin-left: 7px;
  }
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
  -webkit-transition:all 1s;
  transition:all 1s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
}

/* Angular automatically animates things by creating
   transition periods between elements showing and hiding.
   In some cases we do not want to see both elements at the same time
   so we hide things in the ng-leave state that we have tagged with the
   additional hide-ng-leave class.
 */
.hide-ng-leave.ng-leave {
  display: none;
}

.hide-ng-leave .ng-leave {
  display: none;
}
